<!doctype html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui">
    <title>Socket.IO chat</title>
    <link rel="stylesheet" href="dep/bootstrap-3.3.5/css/bootstrap.css">
    <link rel="stylesheet" href="dep/iconfont/iconfont.css">
    <link rel="stylesheet" href="css/index.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <!--[if IE 7]>
    <script src="js/json2.js"></script>
    <![endif]-->
</head>
<body>
<nav class="navbar navbar-default nav-bar" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><i class='iconfont logo-icon'>&#xe625;</i><span class='icon-title'>WeiChat</span></a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">公共聊天室</a></li>
                <li><a href="#">一对多(客服模式)</a></li>
                <li><a href="#">一对一(私信模式)</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                         更多<b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">暂无更多</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<section class='row' id='chatBox'>
    <div class='chat-content col-lg-offset-4 col-lg-4 col-md-4 col-md-offset-4 col-sm-12' style='padding-left: 0;padding-right: 0'>
        <h4 class='content-title'>
            <span class='content-left-title'>
                <i class='iconfont chatroom-title-icon'>&#xe612;</i><span id='room-title'>公共聊天室</span>
            </span>
            <span class='content-right-title'>
                <div id="userInfo-wrap"><span class="userNickName"></span><i class='glyphicon glyphicon-user padding10'></i></div>
                <div id="userNum-wrap"><span class="allUserInline">当前在线:<span id="allInline"></span></span><i class='glyphicon glyphicon-ok-sign inline-color padding101'></i></div>
            </span>
        </h4>
        <div class='messageBox'>
            <ul id='someMessage'>
                <!--这是聊天记录显示区域-->
            </ul>
        </div>
        <div class='sendmessageBox'>
            <div class='chatFun'>
                <span><i class='iconfont someImg'>&#xe62c;</i></span>
            </div>
            <form action="##" id='mesFrom'>
                <textarea name="" id='MessageValue' style='white-space: pre;resize: none;' ></textarea>
                <div class=btn-positoin><button id='sendMes'>发送 <span class='glyphicon glyphicon-triangle-bottom'></span> </button></div>
            </form>
        </div>
    </div>
</section>
<!--模态框-->
<div class="modal fade filter" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="gridSystemModalLabel"> 取个昵称吧</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class='nickName-wrap'>
                        <div class=input-wrap>
                            <input type="text" id='nickNameInput'><button class=' btn-sm random-btn'>随机</button>
                            <span id='usernameInfo'></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <!--<button type="button" class="btn btn-default" data-dismiss="modal">不取</button>-->
                <button type="button" class="enter-inputName  btn">就这个</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<button style='display: none' type="button" id='nickNameModal' class=" btn-lg" data-toggle="modal" data-target=".modal"></button>
</body>
<script src='dep/bootstrap-3.3.5/js/jquery-1.11.3.js'></script>
<script src='dep/bootstrap-3.3.5/js/bootstrap.min.js'></script>
<script src=js/socketTest.js></script>
<script src='./js/socket.io.js'></script>
</html>